<template>
    <div>
        <transition name="animate__animated " enter-active-class="animate__fadeInLeft"
            leave-active-class="animate__fadeOutLeft animate__faster">
            <div class="control_menu" v-if="show">
                <span @click="changeShowState">
                    <el-icon>
                        <component :is="getIcon('DArrowLeft')" />
                    </el-icon>
                </span>
                <span @click="sizeExpend">
                    <el-icon>
                        <component :is="getIcon('zoomIn')" />
                    </el-icon>
                </span>
                <span @click="sizeShrink">
                    <el-icon>
                        <component :is="getIcon('zoomOut')" />
                    </el-icon>
                </span>
                <span @click="sizeInit">
                    <el-icon>
                        <component :is="getIcon('aim')" />
                    </el-icon>
                </span>
                <span @click="addNode">
                    <el-icon>
                        <component :is="getIcon('plus')" />
                    </el-icon>
                </span>
                <span v-for="(tool) in toolbar" @click="tool.function">
                    <el-icon>
                        <component :is="getIcon(tool.icon)" />
                    </el-icon>
                </span>
                <span @click="readyMove">
                    <el-icon>
                        <component :is="getIcon('rank')" />
                    </el-icon>
                </span>
                <span :class="['sel_area', 'sel_area_ing'].indexOf(currentEvent) !== -1 ? 'sel_ing' : ''"
                    @click="sel_area">
                    <el-icon>
                        <component :is="getIcon('Crop')" />
                    </el-icon>
                </span>
                <!-- <span @click="fullScreen">
                 <el-icon>
                <component :is="getIcon('FullScreen')" />
                </el-icon>
                </span> -->
                <span style="margin: 2px;pointer-events: none;">
                    <span class="number" :style="style">
                        {{ nodes }}
                    </span>
                </span>
            </div>
            <div v-else class="control_menu" style="background: rgba(0,0,0,.2);">
                <span @click="changeShowState" style="height: 39px;width: 20px;border-radius: 0;" :style="style">
                    <el-icon>
                        <component :is="getIcon('DArrowRight')" />
                    </el-icon>
                </span>
            </div>
        </transition>
    </div>
</template>
<script setup>
import { getIcon } from "@/utils/tools"
import { usePageRefresh } from "@usehook"

const props = defineProps({
    currentEvent: {
        type: String,
        default: () => ''
    },
    toolbar: {
        type: Array,
        default: () => []
    },
    nodes: {
        type: Number,
        default() {
            return 0
        }
    }
})

let show = $ref(localStorage.getItem("showWorkflowTools") === 'true' ? true : false)

const changeShowState = () => {
    show = !show
}

usePageRefresh(() => {
    localStorage.setItem("showWorkflowTools", show)
})

const style = computed(() => {
    return `background:${props.nodes ? props.nodes >= 2 ? 'rgb(255 62 62 / 84%);' : 'rgb(59 209 59 / 82%);' : 'rgba(255,255,255,.5)'}`
})

const emits = defineEmits(["sizeExpend", "sizeShrink", "sizeInit", "addNode", "sel_area", "readyMove", "fullScreen"])

const readyMove = () => {
    emits("readyMove");
}
const sizeExpend = () => {
    emits("sizeExpend");
}
const sizeShrink = () => {
    emits("sizeShrink");
}
const sizeInit = () => {
    emits("sizeInit");
}
const addNode = () => {
    emits("addNode")
}
const fullScreen = () => {
    emits("fullScreen");
}
const sel_area = (e) => {
    emits("sel_area");
    e.preventDefault();
    e.stopPropagation();
    e.cancelBubble = true;
}
</script>

<style scoped>
.control_menu {
    background: rgb(0 0 0 / 6%);
    display: flex;
    user-select: none;
    overflow: hidden !important;
    gap: 5px;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    left: 5px;
    top: 5px;
    border-radius: 3px;
}

.control_menu span {
    height: 35px;
    width: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
}

.sel_ing {
    color: #289de9;
    border: 1px solid #289de9 !important;
    border-radius: 100%;
}

.number {
    font-size: 16px;
    border-radius: 50%;
}
</style>